<!DOCTYPE html>
<html>
    <head>
        <title>Rage N Furious</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel=stylesheet type="text/css" href="/files/css/stylehome.css" />       
        <script>
            var v = new Array();
            v["user"] = new Object();
            v["user"].pseudo = "<?php echo $me["pseudo"]; ?>";
            v["user"].hash = "<?php echo $this->session->userdata('session_id'); ?>";
            v["user"].win = <?php echo $me["win"]; ?>;
            v["user"].lost = <?php echo $me["lost"]; ?>;
            v["user"].perso = <?php echo $me["perso"]; ?>;
        </script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/lobby_rooms.js"></script>
        <script src="http://js.pusher.com/1.11/pusher.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" ></script>
        <link rel=stylesheet type="text/css" href="/files/css/jquery-ui/jquery-ui-1.8.19.custom.css" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <style>
            .ui-dialog .ui-dialog-title, .ui-dialog .ui-button, .ui-dialog #dialog-confirm-invite , .ui-dialog #dialog-message-ready , .ui-dialog #dialog-message-decline { font-size:12px;}
        </style>
		<script>
		function showRules(){
			$( "#dialog-regles" ).dialog({ width: "auto", maxWidth: 670, maxHeight:490 });
		}
		</script>
		
    </head>

	<body id="body">
		<div id="header"></div>
		<div id="menu_top">
			<table class="tablemenu">
				<tr>
				 <th class="thmenu"><a href="/rooms">HOME</a></th>
				 <th class="thmenu"><a href="/rooms/rules">RULES</a></th>
				 <th class="thmenu"><a href="/rooms/ranking">RANKING</a></th> 
				 <th class="thmenu"><a href="/rooms/contact">CONTACTS</a></th>
				 <th class="lastth"><a href="/lobby/logout" >LOGOUT</a></th>
				</tr>			  
			</table>
		</div>
                
                <div id="perso-area" style="width:900px; margin:auto;">
			Choisissez votre personnage pour le jeu !<br />
			<div id="persoDiv" style="text-align:center;">
				<table class="tableperso">
                    <tr>
                        <th class="thperso"><label for="perso0"><img src="/files/images/alice.png" alt="Alice" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso1"><img src="/files/images/pikachuskate.png" alt="Pikachu" style="vertical-align:middle;" /></label></label></th>
                        <th class="thperso"><label for="perso2"><img src="/files/images/elderwraith.png" alt="Elderwraith" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso3"><img src="/files/images/meiling.png" alt="Meiling" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso4"><img src="/files/images/ExtraC.png" alt="ExtraC" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso5"><img src="/files/images/makron.png" alt="Makron" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso6"><img src="/files/images/yeti.png" alt="Yeti" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso7"><img src="/files/images/bleubody.png" alt="Bluebody" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso8"><img src="/files/images/blackknight.png" alt="Blacknight" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso9"><img src="/files/images/skeleton.png" alt="Skeleton" style="vertical-align:middle;" /></label></th>
                        <th class="thperso"><label for="perso10"><img src="/files/images/ExtraD.png" alt="ExtraD" style="vertical-align:middle;" /></label></th>
                    </tr>
                    <tr>
                        <th class="thperso">Alice</th>
                        <th class="thperso">Pikachu</th>
                        <th class="thperso">ElderWraith</th>
                        <th class="thperso">Meiling</th>
                        <th class="thperso">ExtraC</th>
                        <th class="thperso">Makron</th>
                        <th class="thperso">Yeti</th>
                        <th class="thperso">BlueBody</th>
                        <th class="thperso">BlackNight</th>
                        <th class="thperso">Skeleton</th>
                        <th class="thperso">ExtraD</th>
                    </tr>
                    <tr>
				        <th class="thperso"><input onclick="changePerso('0')" type="radio" name="perso" value="0" id="perso0" /></th>
                        <th class="thperso"><input onclick="changePerso('1')" type="radio" name="perso" value="1" id="perso1" /></th>              
				        <th class="thperso"><input onclick="changePerso('2')" type="radio" name="perso" value="2" id="perso2" /></th>			    
                        <th class="thperso"><input onclick="changePerso('3')" type="radio" name="perso" value="3" id="perso3" /></th>    
                        <th class="thperso"><input onclick="changePerso('4')" type="radio" name="perso" value="4" id="perso4" /></th>		    
                        <th class="thperso"><input onclick="changePerso('5')" type="radio" name="perso" value="5" id="perso5" /></th>		    
                        <th class="thperso"><input onclick="changePerso('6')" type="radio" name="perso" value="6" id="perso6" /></th>	    
                        <th class="thperso"><input onclick="changePerso('7')" type="radio" name="perso" value="7" id="perso7" /></th> 				    
                        <th class="thperso"><input onclick="changePerso('8')" type="radio" name="perso" value="8" id="perso8" /></th>		    
                        <th class="thperso"><input onclick="changePerso('9')" type="radio" name="perso" value="9" id="perso9" /></th>    
                        <th class="thperso"><input onclick="changePerso('10')" type="radio" name="perso" value="10" id="perso10" /></th>
                    </tr> 
				</table>
                <br />
				<br />
			</div>				
		</div>
	
		<div id="play_area">
			<img src="/files/images/defoulezvotrerage.png" style="margin:2px 0 0 100px;">
			<a href="#"><img class="play_button" src="/files/images/play_button.png"></a><br/>
			<p class="players_choice">
				<input type="text" id="pseudo_local1" size="18" />
				<input type="text" id="pseudo_distant1" size="18" />
			</p>
		</div>
        
        <!-- tableau playing list -->
        
        
		<div id="playing_room">
		<h3>Joueurs connectés : </h3>
		<table id="playinglist_table">
                    <tbody>
			<tr class="first_tr">
				<th>Joueur</th>
				<th>Statut</th>
				<th>Action</th> 
			</tr>
				</tbody>
		</table>
		<div style="text-align:center; color:#0080c5; font-size:28px; font-family : 'Open Sans', 'Segoe UI', Arial, sans-serif;" onclick="showRules()"><a href='#'>voir les règles du jeu</a></div>
		</div>
		<div id="main_page">
			<div id="chat-box">
                <p id="chat-view"></p>
                <input type="text" name="message" id="message" />
                <input type="button" id="envoyer" value="Envoyer"></input>
			</div>
		</div>
        <!--<audio id="audio" style="display:none;" controls="controls" ></audio>-->
        <audio id="audio" style="display:none;" controls>
            <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.ogg" type="audio/ogg" id="audio-src-ogg" />
            <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.mp3" type="audio/mpeg" id="audio-src-mp3" />
            <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.wav" type="audio/x-wav" id="audio-src-wav" />
            Votre navigateur ne gère pas la balise audio !
        </audio>
        

        <div style="display:none; "id="dialog-confirm-invite" title="Invitation à jouer">
            <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Vous avez reçu une invitation de la part de <strong id="dialog-confirm-invite-pseudo"></strong>. Si vous acceptez, vous serez redirigé vers la salle de jeu.</p>
        </div>
        <div style="display:none; "id="dialog-message-ready" title="Votre invitation à jouer">
            <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 20px 0;"></span><strong id="dialog-message-ready-pseudo"></strong> a accepté votre invitation, vous allez être redirigé vers la salle de jeu.</p>
        </div>
        <div style="display:none; "id="dialog-message-decline" title="Votre invitation à jouer">
            <p><span class="ui-icon ui-icon-circle-close" style="float:left; margin:0 7px 20px 0;"></span><strong id="dialog-message-decline-pseudo"></strong> a décliné votre invitation.</p>
        </div>
		<div id="dialog-regles" style="display:none;" title="Raccourcis claviers">
			<img src="http://rbeuque74eu.blob.core.windows.net/files/images/tuto.png" style="width:670px; height:490px;" alt="règles" /><br />
			<div style="text-align:center; text-decoration:none;"><a href="/rooms/rules">voir les règles du jeu en version complète</a></div>
		</div>

		<div pub-key="pub-0607ceaa-239b-4ab8-a2c9-2e6a28ae3c0d" sub-key="sub-eb735185-9d22-11e1-bedd-67aa31f82715" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div> 
        <script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
		<script>(function(){
                // LISTEN FOR MESSAGES
				PUBNUB.subscribe({
                        channel	 : "chat-rooms",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushChatMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                               /* alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )*/
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                /*alert("And we're Back!")*/
                        }
                })
                	PUBNUB.subscribe({
                        channel	 : "user-<?php echo $this->session->userdata('session_id'); ?>",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushUser(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                               /* alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )*/
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                              /*  alert("And we're Back!")*/
                        }
                })
        })();
            </script>
	</body>

</html>